import React from 'react';
import Modal from './Modal';

interface WelcomeGuideProps {
  isOpen: boolean;
  onClose: () => void;
  onStartInteractiveGuide: () => void;
}

const WelcomeGuide: React.FC<WelcomeGuideProps> = ({ isOpen, onClose, onStartInteractiveGuide }) => {
  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="新手引导"
      footer={
        <div className="flex justify-end">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white transition-colors"
          >
            关闭
          </button>
        </div>
      }
    >
      <div className="space-y-4 text-gray-300">
        <p>欢迎来到动态文字AI JRPG！这是一个与AI共同创造故事的平台。</p>
        
        <div className="p-3 bg-gray-700/50 rounded-lg">
          <h3 className="font-semibold text-lg text-cyan-400">交互式引导</h3>
          <p className="text-sm mt-2">我们推荐您体验交互式引导，它会手把手带您完成从设置到开始游戏的全部流程。</p>
          <button 
            onClick={onStartInteractiveGuide}
            className="mt-3 px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-md shadow-sm transition-colors text-sm"
          >
            重新播放交互式引导
          </button>
        </div>

        <div className="p-3 bg-gray-700/50 rounded-lg">
          <h3 className="font-semibold text-lg text-cyan-400">基本流程</h3>
          <ol className="list-decimal list-inside mt-2 space-y-1 text-sm">
            <li>在【设置】中配置好您的API。</li>
            <li>在主菜单点击【创建新游戏】，填写世界观。</li>
            <li>进入游戏后，在【编辑AI配置】中生成初始提示词。</li>
            <li>保存配置，开始您的冒险！</li>
          </ol>
        </div>

      </div>
    </Modal>
  );
};

export default WelcomeGuide;